import { IconFont } from "@nutui/icons-react-taro";
import { Avatar, Grid } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { navigateTo } from "@tarojs/taro";
import React from "react";
import { Carousel, SearchInput } from "../../components";
import { full_data, news_list } from "../../mocks";
import { index_carousel_list } from "../../mocks/carousel";
import { ICarousel, IFood, INews } from "../../types";
import { FluidList } from "./components/FluidList";
import { NewsSection } from "./components/NewsSection";
import "./index.scss";

const Index = () => {
  // 头像
  const avatar = require("../../images/1.png");
  /**
   * 点击打开内容
   * @param data
   */
  const handleOnClickItem = (data: IFood) => {
    navigateTo({
      url: `/pages/cookbook_detail/index?id=${data.id}`,
    });
  };

  /**
   * 点击打开资讯内容
   * @param data
   */
  const handleOnClickNews = (data: INews) => {
    navigateTo({
      url: `/pages/news_detail/index?id=${data.id}`,
    });
  };

  /**
   * 点击幻灯片进入产品详情
   * @param data
   */
  const handleOnCarouselClick = (data: ICarousel) => {
    navigateTo({
      url: `/pages/cookbook_detail/index?id=${data.id}`,
    });
  };

  /**
   * 点击头像进入个人中心
   */
  const handleClickAvatar = () => {
    navigateTo({
      url: "/pages/user_center/index",
    });
  };

  return (
    <View className="wrapper">
      {/* 幻灯片部分 */}
      <View className="container">
        {/* 搜索框部分 */}
        <View className="top-bar">
          <SearchInput placeholder="今天吃啥呢?" />
          <Avatar className="avatar" src={avatar} onClick={handleClickAvatar} />
        </View>
        <Grid gap={3}>
          <Grid.Item text="健康食谱">
            <IconFont
              fontClassName="zz"
              classPrefix="zz"
              name="didaomeishi"
              size={28}
            />
          </Grid.Item>
          <Grid.Item text="随机菜谱">
            <IconFont
              fontClassName="zz"
              classPrefix="zz"
              name="meishi"
              size={28}
            />
          </Grid.Item>
          <Grid.Item text="菜谱分类">
            <IconFont
              fontClassName="zz"
              classPrefix="zz"
              name="shengxian-roulei3"
              size={28}
            />
          </Grid.Item>
          <Grid.Item text="美食广场">
            <IconFont
              fontClassName="zz"
              classPrefix="zz"
              name="dazhuanpan"
              size={28}
            />
          </Grid.Item>
        </Grid>
        <Carousel
          data={index_carousel_list}
          height={240}
          onClickItem={handleOnCarouselClick}
        />
        {/* 资讯列表 */}
        <NewsSection
          title="知识课堂"
          subTitle="每天一个营养小知识"
          list={news_list}
          onClick={handleOnClickNews}
        />
        {/* 推荐列表 */}
        <FluidList data={full_data} onClick={handleOnClickItem} />
      </View>
      <View className="mask-1" />
    </View>
  );
};

export default Index;
